<template>
	<view class="">
		<view class="header header_wi" :style="'padding-top: ' + navH + 'px;'">
			<view class="header_height" :style="'height:' + gaodu + 'px;line-height:' + gaodu + 'px;top:' + gaodutops + 'px;'">
				<view class="index_h_cont3">
					<view class="index_wenben_img" @tap="jumpzuo"><image :src="imgUrl + '/dzx_img33.png'" mode="widthFix"></image></view>
					<view class="index_wenben">{{ $t('page_order_index.Purchase_order') }}</view>
				</view>
			</view>
			<view class="coloe_title">s</view>
		</view>
		<view class="index_center" :style="'padding-top:' + (navH + 50) + 'px;padding-bottom: 120rpx;'">
			<view class="containers">
				<!-- tab栏 -->
				<view class="headers f-28 col-3">
					<view @tap.stop.prevent="bindheadersTap" :class="dataType === 'all' ? 'active' : ''" data-type="all">
						<text>{{ $t('page_order_index.all') }}</text>
					</view>
					<view @tap="bindheadersTap" :class="dataType === 'payment' ? 'active' : ''" data-type="payment">
						<text>{{ $t('page_order_index.To_be_paid') }}</text>
					</view>
					<view @tap="bindheadersTap" :class="dataType === 'delivery' ? 'active' : ''" data-type="delivery">
						<text>{{ $t('page_order_index.Goods_be_shipped') }}</text>
					</view>
					<view @tap="bindheadersTap" :class="dataType === 'received' ? 'active' : ''" data-type="received">
						<text>{{ $t('page_order_index.Goods_be_received') }}</text>
					</view>
					<view @tap="bindheadersTap" :class="dataType === 'comment' ? 'active' : ''" data-type="comment">
						<text>{{ $t('page_order_index.To_be_evaluated') }}</text>
					</view>
				</view>
				<!-- 订单列表 -->
				<view class="goods-detail-box">
					<scroll-view @scrolltolower="bindDownLoad" scroll-y :style="'height: ' + scrollHeight + 'px; width: 750rpx;margin-top:88rpx;'">
						<view class="wrapper" v-if="list.data.length > 0">
							<!-- <view wx:if="{{list.length}}"> -->
							<view class="m-top20" @tap.stop.prevent="navigateToDetail" :data-id="item.order_id" v-for="(item, index) in list.data" :key="index">
								<view class="order-box b-f">
									<view class="order-headers dis-flex">
										<view class="flex-box t-l">
											<text class="title">{{ $t('page_order_index.Commodity_list') }}</text>
										</view>
										<view class="flex-box t-r">
											<text class="cont">{{ item.state_text }}</text>
										</view>
									</view>
								</view>

								<view class="order-box b-f">
									<view class="order-cont dis-flex">
										<view class="order-num">
											<text>{{ $t('page_order_index.Order_number') }}{{ item.order_no }}</text>
										</view>
										<view class="order-time">
											<text>{{ item.create_time }}</text>
										</view>
									</view>
								</view>

								<view class="order-box order-img_list">
									<view class="order-shop">
										<view class="order-list-box dis-flex" v-for="(itemss, index1) in item.goods" :key="item.goods">
											<view class="left">
												<view class="dis-flex">
													<view class="order-shop-left" >
														<image :src="itemss.image.file_path"></image>
													</view>
												</view>
											</view>
											<view class="right dis-flex flex-x-center flex-y-center">
												<text class="goods-number">{{ $t('page_order_index.pack_num') }}{{ itemss.total_num}}</text>
												<text class="iconfont icon-xiangyoujiantou user-orderJtou"></text>
											</view>
										</view>
									</view>
								</view>

								<view class="order-box b-f">
									<view class="order-btn dis-flex">
										<view class="order-left">
											<view class="text">
												<text>{{ $t('page_order_index.total') }}</text>
												<text class="col-m">{{ price_mode.unit }}{{ item.pay_price }}</text>
											</view>
										</view>
										<view class="order-right">
											<view class="btn-group dis-flex" v-if="item.order_status.value != 20">
												<!-- 未支付取消订单 -->
												<view v-if="item.pay_status.value == 10">
													<view @tap.stop.prevent="cancelOrder" class="btn-default" :data-id="item.order_id">{{ $t('page_order_index.cancel') }}</view>
												</view>
												<!-- 已支付取消订单 -->
												<block v-if="item.order_status.value != 21">
													<view v-if="item.pay_status.value == 20 && item.delivery_status.value == 10">
														<view @tap.stop.prevent="cancelOrder" class="btn-default" :data-id="item.order_id">
															{{ $t('page_order_index.Apply_cancellation') }}
														</view>
													</view>
													<!-- 订单核销码 -->
													<view
														v-if="
															item.pay_status.value == 20 &&
																item.delivery_type.value == DeliveryTypeEnum.EXTRACT.value &&
																item.delivery_status.value == 10
														"
													>
														<view @tap.stop.prevent="onExtractQRCode" class="btn-main" :data-id="item.order_id">
															<text class="iconfont icon-qr-extract"></text>
															<text class="m-l-10">{{ $t('page_order_index.Check_code') }}</text>
														</view>
													</view>
												</block>
												<block v-else>
													<view class="f-28 col-8">{{ $t('page_order_index.Cancellation_application') }}</view>
												</block>
												<!-- 订单付款 -->
												<view v-if="item.pay_status.value == 10">
													<view @tap.stop.prevent="onPayOrder" class="btn-main" :data-id="item.order_id">{{ $t('page_order_index.pay') }}</view>
												</view>
												<!-- 确认收货 -->
												<view v-if="item.delivery_status.value == 20 && item.receipt_status.value == 10">
													<view @tap.stop.prevent="receipt" class="btn-main" :data-id="item.order_id">
														{{ $t('page_order_index.Confirm_receipt_goods') }}
													</view>
												</view>
												<!-- 订单评价 -->
												<view v-if="item.order_status.value == 30 && item.is_comment == 0">
													<view @tap.stop.prevent="comment" class="btn-default" :data-id="item.order_id">{{ $t('page_order_index.evaluation') }}</view>
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view v-if="no_more" class="no-more f-30">{{ $t('page_order_index.No_more') }}</view>
						<view v-if="!isLoading && !list.data.length">
							<view class="yoshop-notcont">
								<text class="iconfont icon-wushuju"></text>
								<text class="cont">{{ $t('page_order_index.no_order') }}</text>
							</view>
						</view>
					</scroll-view>
				</view>

				<!-- 核销码弹出层 -->
				<zan-popup :show="showQRCodePopup" @close="onToggleQRCodePopup">
					<view class="pop-qrcode pop-example__container">
						<view class="pop-title">
							<text class="f-30">{{ $t('page_order_index.Verification_QR_code') }}</text>
						</view>
						<view class="pop-content"><image :src="QRCodeImage"></image></view>
					</view>
				</zan-popup>

				<!-- 支付方式弹窗 -->
				<zan-popup :show="showPayPopup" @close="onTogglePayPopup">
					<view class="pop-orderPay pop-example__container">
						<view class="pop-title">
							<text class="f-30">{{ $t('page_order_index.Please_select_payment_method') }}</text>
						</view>
						<view class="pop-content">
							<view class="pay-method">
								<form @submit="onSelectPayType" :data-value="PayTypeEnum.WECHAT.value" :report-submit="true">
									<button formType="submit" class="btn-normal">
										<view class="pay-item dis-flex flex-x-between">
											<view class="item-left dis-flex flex-y-center">
												<view class="item-left_icon wechat"><text class="iconfont icon-weixinzhifu"></text></view>
												<view class="item-left_text">
													<text>{{ PayTypeEnum.WECHAT.name }}</text>
												</view>
											</view>
										</view>
									</button>
								</form>
								<form @submit="onSelectPayType" :data-value="PayTypeEnum.BALANCE.value" :report-submit="true">
									<button formType="submit" class="btn-normal">
										<view class="pay-item dis-flex flex-x-between">
											<view class="item-left dis-flex flex-y-center">
												<view class="item-left_icon balance"><text class="iconfont icon-qiandai"></text></view>
												<view class="item-left_text">
													<text>{{ PayTypeEnum.BALANCE.name }}</text>
												</view>
											</view>
										</view>
									</button>
								</form>
							</view>
						</view>
					</view>
				</zan-popup>
			</view>
		</view>
	</view>
</template>

<script>
import zanPopup from '@/components/popup/index';
const app = getApp(); // 枚举类：发货方式

import DeliveryTypeEnum from '../../utils/enum/DeliveryType.js'; // 枚举类：支付方式

import PayTypeEnum from '../../utils/enum/order/PayType';
export default {
	components: {
		zanPopup
	},
	data() {
		return {
			navH: app.globalData.navHeight,
			
			gaodu: app.globalData.height,
			gaodutops: app.globalData.top,
			imgUrl: app.globalData.imgUrl,
			dataType: 'all',
			price_mode: uni.getStorageSync('price_mode'),
			// 列表类型
			list: [],

			// 订单列表
			scrollHeight: null,

			// 列表容器高度
			DeliveryTypeEnum,

			// 配送方式
			PayTypeEnum,

			// 支付方式
			no_more: false,

			// 没有更多数据
			isLoading: true,

			// 是否正在加载中
			page: 1,

			// 当前页码
			showQRCodePopup: false,

			// 核销码弹窗显示隐藏
			// 核销码图片
			QRCodeImage: '',

			payOrderId: '',
			showPayPopup: false,
			length: 0,
			value: '',
			name: ''
		};
	},
	/**
	 * 生命周期函数--监听页面加载
	 */
	onLoad(options) {
		let _this = this; // 设置scroll-view高度

		_this.setListHeight(); // 设置数据类型

		_this.dataType= options.type || 'all'
	},
	/**
	 * 生命周期函数--监听页面显示
	 */
	onShow() {
		// 获取订单列表
		this.getOrderList();
	},
	onPullDownRefresh() {
		uni.stopPullDownRefresh();
	},
	methods: {
		jumpzuo() {
			uni.navigateBack();
		},
		/**
		 * 获取订单列表
		 */
		getOrderList(isPage, page) {
			let _this = this;

			app.globalData._get(
				'user.order/lists',
				{
					page: page || 1,
					dataType: _this.dataType
				},
				result => {
					let resList = result.data.list;
					let dataList = _this.list;
					if (isPage == true) {
						_this['list.data']= dataList.data.concat(resList.data)
						_thisisLoading= false
					} else {
						_this.list= resList
						_this.isLoading= false
					}
				}
			);
		},

		/**
		 * 切换标签
		 */
		bindheadersTap(e) {
				this.dataType= e.currentTarget.dataset.type
				this.list= {}
				this.isLoading= true
				this.page= 1
				this.no_more= false
			this.getOrderList(e.currentTarget.dataset.type);
		},

		/**
		 * 取消订单
		 */
		cancelOrder(e) {
			let _this = this;

			let order_id = e.currentTarget.dataset.id;
			uni.showModal({
				title: '友情提示',
				content: '确认要取消该订单吗？',

				success(o) {
					if (o.confirm) {
						app.globalData._post_form(
							'user.order/cancel',
							{
								order_id
							},
							result => {
								_this.getOrderList(_this.dataType);
							}
						);
					}
				}
			});
		},

		/**
		 * 确认收货
		 */
		receipt(e) {
			let _this = this;

			let order_id = e.currentTarget.dataset.id;
			uni.showModal({
				title: '提示',
				content: '确认收到商品？',

				success(o) {
					if (o.confirm) {
						app.globalData._post_form(
							'user.order/receipt',
							{
								order_id
							},
							result => {
								_this.getOrderList(_this.dataType);
							}
						);
					}
				}
			});
		},

		/**
		 * 点击付款按钮
		 */
		onPayOrder(e) {
			let _this = this; // 记录订单id
			_this.payOrderId= e.currentTarget.dataset.id
			_this.onTogglePayPopup();
		},

		/**
		 * 选择支付方式
		 */
		onSelectPayType(e) {
			let _this = this; // 记录formId

			app.globalData.saveFormId(e.detail.formId); // 隐藏支付方式弹窗

			_this.onTogglePayPopup();

			if (!_this.showPayPopup) {
				// 发起付款请求
				_this.payment(_this.payOrderId, e.currentTarget.dataset.value);
			}
		},

		/**
		 * 显示/隐藏支付方式弹窗
		 */
		onTogglePayPopup() {
			this.showPayPopup= !this.showPayPopup
		},

		/**
		 * 发起付款请求
		 */
		payment(orderId, payType) {
			// 显示loading
			uni.showLoading({
				title: '正在处理...'
			});

			app.globalData._post_form(
				'user.order/pay',
				{
					order_id: orderId,
					payType: payType
				},
				result => {
					if (result.code === -10) {
						app.globalData.showError(result.msg);
						return false;
					} // 发起微信支付

					if (result.data.pay_type == PayTypeEnum.WECHAT.value) {
						app.globalData.wxPayment({
							payment: result.data.payment,

							success() {
								// 跳转到已付款订单
								uni.navigateTo({
									url: '../order/detail?order_id=' + orderId
								});
							},

							fail() {
								app.globalData.showError(result.msg.error);
							}
						});
					} // 余额支付

					if (result.data.pay_type == PayTypeEnum.BALANCE.value) {
						app.globalData.showSuccess(result.msg.success, () => {
							// 跳转到已付款订单
							uni.navigateTo({
								url: '../order/detail?order_id=' + orderId
							});
						});
					}
				},
				null,
				() => {
					uni.hideLoading();
				}
			);
		},

		/**
		 * 订单评价
		 */
		comment(e) {
			let _this = this;
			let order_id = e.currentTarget.dataset.id;
			uni.navigateTo({
				// url: '/pages/goods/comment/comment?order_id=' + order_id
				url: '/pages/indexs/my_dingdan_qpj/my_dingdan_qpj?type=2&id=' + order_id
			});
		},

		/**
		 * 跳转订单详情页
		 */
		navigateToDetail(e) {
			console.log("走这里不",e.currentTarget.dataset.id)
			let order_id = e.currentTarget.dataset.id;
			uni.navigateTo({
				url: '../order/detail?order_id=' + order_id
			});
		},

		/**
		 * 下拉到底加载数据
		 */
		bindDownLoad() {
			// 已经是最后一页
			if (this.page >= this.list.last_page) {
				this.no_more= true
				return false;
			} // 加载下一页列表

			this.getOrderList(true, ++this.page);
		},

		/**
		 * 设置商品列表高度
		 */
		setListHeight() {
			let systemInfo = uni.getSystemInfoSync();
			let rpx = systemInfo.windowWidth / 750;
			let // 计算rpx
				tapHeight = Math.floor(rpx * 88);
			
				
			this.scrollHeight = systemInfo.windowHeight - tapHeight; // swiper高度
		},

		/**
		 * 查看核销二维码
		 */
		onExtractQRCode(e) {
			let _this = this;

			let order_id = e.currentTarget.dataset.id; // 调用后台api获取核销二维码
			uni.showLoading({
				title: '......'
				// title: '加载中'
			});

			app.globalData._get(
				'user.order/extractQrcode',
				{
					order_id
				},
				result => {
					// 设置二维码图片路径
					_this.QRCodeImage= result.data.qrcode

					_this.onToggleQRCodePopup();
				},
				null,
				() => {
					uni.hideLoading();
				}
			);
		},

		/**
		 * 核销码弹出层
		 */
		onToggleQRCodePopup() {
			let _this = this;

			_this.showQRCodePopup= !_this.showQRCodePopup
		}
	}
};
</script>
<style>
@import './index.css';
</style>
